<template>
	<layout class="cemetery-query">
		<warm></warm>
		<!-- 主要区域 -->
		<view class="main-content">
			<!-- 查询区域 -->
			<view class="search-section">
				<view class="search-header">
					<view class="title-area">
						<text class="title">查询服务</text>
					</view>
					<text class="subtitle">提供精确的位置信息查询服务</text>
				</view>

				<view class="search-form">
					<view class="form-row">
						<view class="form-item">
							<text class="label">园区选择</text>
							<view class="input-wrapper">
								<uni-icons type="map" size="16" color="#666"></uni-icons>
								<uni-data-picker :border="false" v-model="parkArea" :localdata="parkOptions" placeholder="请选择园区" popup-title="选择园区" @change="handleAreaChange" />
							</view>
						</view>
					</view>
					<view class="form-row">
						<view class="form-item">
							<text class="label">逝者姓名</text>
							<view class="input-wrapper">
								<uni-icons type="person" size="16" color="#666"></uni-icons>
								<uni-easyinput :inputBorder="false" v-model="queryParams.szxm" placeholder="请选择输入姓名" />
							</view>
						</view>
					</view>
					<view class="form-row">
						<view class="form-item">
							<text class="label">家属姓名</text>
							<view class="input-wrapper">
								<uni-icons type="contact" size="16" color="#666"></uni-icons>
								<uni-easyinput :inputBorder="false" v-model="queryParams.xm" placeholder="请选择输入姓名" />
							</view>
						</view>
						<view class="form-item">
							<text class="label">联系电话</text>
							<view class="input-wrapper">
								<uni-icons type="phone" size="16" color="#666"></uni-icons>
								<uni-easyinput :inputBorder="false" v-model="queryParams.lxdh" placeholder="请选择输入电话" />
							</view>
						</view>
					</view>

					<view class="search-actions">
						<button class="reset-btn" @click="handleReset">
							<uni-icons type="refresh" size="18" color="#666"></uni-icons>
							<text>重置查询</text>
						</button>
						<button class="search-btn" type="primary" @click="handleSearch">
							<uni-icons type="search" size="18" color="#fff"></uni-icons>
							<text>开始查询</text>
						</button>
					</view>

					<view class="quick-tips">
						<view class="tip-item">
							<uni-icons type="help" size="14" color="#999"></uni-icons>
							<text>未找到对应园区可点击立即刷新按钮</text>
							<view class="refresh-link" @click="handleRefreshParkData">
								<uni-icons type="refresh" size="14" color="#4a90e2"></uni-icons>
								<text>立即刷新</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 查询结果区域 -->
			<view class="result-section">
				<view class="result-header">
					<view class="header-left">
						<uni-icons type="list" size="20" color="#666"></uni-icons>
						<text class="title">查询结果</text>
						<text class="count">(共找到 {{ searchResultsCount }} 条)</text>
					</view>
					<view class="header-right">
						<text class="update-time">更新时间：{{ refreshTime }}</text>
					</view>
				</view>

				<!-- 结果列表 -->
				<view class="result-grid-container">
					<!-- 结果为空显示 -->
					<view class="empty-result" v-if="searchResultsEmpty">
						<image src="/static/images/empty.png" mode="aspectFit" class="empty-icon" />
						<text class="empty-text">暂无查询结果</text>
						<text class="empty-desc">请调整查询条件后重试</text>
					</view>
					<view class="result-grid">
						<view class="result-card" v-for="(item, index) in searchResults" :key="index">
							<!-- 卡片顶部装饰 -->
							<view class="card-pattern"></view>

							<!-- 卡片头部 -->
							<view class="card-header">
								<view class="header-main">
									<text class="deceased-name">{{ getNames(item.if5r1SzxxList) }}</text>
								</view>
								<view class="header-tags">
									<view class="park-tag">
										<uni-icons type="home" size="12" color="#4a90e2"></uni-icons>
										<text>{{ item.mwy }}</text>
									</view>
									<view class="status-tag" :style="{ color: item.color, background: item.background }">
										<uni-icons type="circle" size="12" :color="item.color"></uni-icons>
										<text>{{ item.mwzt }}</text>
									</view>
								</view>
							</view>

							<!-- 卡片内容 -->
							<view class="card-content">
								<view class="info-group">
									<view class="info-item">
										<uni-icons type="paperplane" size="14" color="#666"></uni-icons>
										<text class="label">墓位编号：</text>
										<text class="value">{{ item.name }}</text>
									</view>
									<view class="info-item">
										<uni-icons type="person" size="14" color="#666"></uni-icons>
										<text class="label">家属姓名：</text>
										<text class="value">{{ item.xm }}</text>
									</view>
									<view class="info-item">
										<uni-icons type="phone" size="14" color="#666"></uni-icons>
										<text class="label">联系电话：</text>
										<text class="value">{{ setPhone(item.lxdh) }}</text>
									</view>
									<!-- <view class="info-item">
								<uni-icons type="calendar" size="14" color="#666"></uni-icons>
								<text class="label">使用年限：</text>
								<text class="value">{{ item.yxrq ? getYear(item.yxrq) + '年' : '-' }}</text>
							</view> -->
									<!-- <view class="info-item">
								<uni-icons type="info" size="14" color="#666"></uni-icons>
								<text class="label">墓碑墓型</text>
								<text class="value">{{ item.mx }}</text>
							</view> -->
								</view>
							</view>

							<!-- 卡片底部 -->
							<view class="card-footer">
								<button class="detail-btn" @click="handleViewDetail(item)">
									<uni-icons type="info-filled" size="18" color="#4a90e2"></uni-icons>
									<text>查看详情</text>
								</button>
							</view>

							<!-- 卡片装饰 -->
							<view class="corner-decoration top-left"></view>
							<view class="corner-decoration top-right"></view>
							<view class="corner-decoration bottom-left"></view>
							<view class="corner-decoration bottom-right"></view>
						</view>
					</view>
				</view>
				<view class="pagination-container">
					<uni-pagination :total="searchResultsCount" :page-size="queryParams.pageSize" :current="queryParams.pageNum" @change="handlePaginationChange"></uni-pagination>
				</view>
			</view>
		</view>

		<!-- 详情弹出框 -->
		<uni-popup ref="detailPopup" type="center">
			<view class="detail-popup">
				<!-- 弹窗头部 -->
				<view class="popup-header">
					<text class="title">墓位详情信息</text>
					<uni-icons @click="handleCloseDetail" type="close" size="30" color="#fff"></uni-icons>
				</view>

				<!-- 弹窗内容 -->
				<view class="popup-content" v-if="currentDetail">
					<!-- 主要信息 -->
					<view class="main-info">
						<view class="info-header">
							<view class="info-header-left">
								<view class="info-header-left-item" v-for="item in currentDetail.if5r1SzxxList" :key="item.id">
									<text class="deceased-name">{{ item.szxm }}</text>
									<text class="deceased-age" v-if="item.nl">{{ item.nl }}岁</text>
									<uni-tag :text="item.xb" :type="item.xb === '男' ? 'primary' : 'warning'" v-if="item.xb"></uni-tag>
									<uni-tag :text="item.qsgx" type="warning" v-if="item.qsgx"></uni-tag>
								</view>
							</view>
							<view class="status-tag" :style="{ color: currentDetail.color, background: currentDetail.background }">
								<uni-icons type="circle" size="12" :color="currentDetail.color"></uni-icons>
								{{ currentDetail.mwzt }}
							</view>
						</view>
						<view class="park-info">
							<uni-icons type="location-filled" size="16" color="#4a90e2"></uni-icons>
							<text>{{ currentDetail.mwy }} · {{ currentDetail.mwq }} · {{ currentDetail.mwp }} · {{ currentDetail.mwh }} </text>
						</view>
					</view>

					<!-- 详细信息网格 -->
					<view class="info-grid">
						<!-- 新增性别字段 -->
						<view class="grid-item">
							<view class="item-inner">
								<view class="icon-wrapper">
									<uni-icons type="calendar-filled" size="24" color="#4a90e2"></uni-icons>
								</view>
								<view class="content">
									<text class="value">{{ currentDetail.csrq || '-' }}</text>
									<text class="label">出生日期</text>
								</view>
							</view>
						</view>
						<view class="grid-item">
							<view class="item-inner">
								<view class="icon-wrapper">
									<uni-icons type="calendar-filled" size="24" color="#4a90e2"></uni-icons>
								</view>
								<view class="content">
									<text class="value">{{ currentDetail.sssj || '-' }}</text>
									<text class="label">逝世日期</text>
								</view>
							</view>
						</view>
					</view>
					<view class="info-grid">
						<view class="grid-item">
							<view class="item-inner">
								<view class="icon-wrapper">
									<uni-icons type="person-filled" size="24" color="#4a90e2"></uni-icons>
								</view>
								<view class="content">
									<text class="value">{{ currentDetail.xm }}</text>
									<text class="label">家属姓名</text>
								</view>
							</view>
						</view>

						<view class="grid-item">
							<view class="item-inner">
								<view class="icon-wrapper">
									<uni-icons type="phone-filled" size="24" color="#4a90e2"></uni-icons>
								</view>
								<view class="content">
									<text class="value">{{ setPhone(currentDetail.lxdh) }}</text>
									<text class="label">联系电话</text>
								</view>
							</view>
						</view>
					</view>
					<!-- 使用期限信息 -->
					<view class="expiry-info">
						<view class="expiry-header">
							<uni-icons type="calendar" size="16" color="#666"></uni-icons>
							<text>使用期限信息</text>
						</view>
						<view class="expiry-content">
							<view class="expiry-card">
								<view class="expiry-timeline">
									<view class="timeline-item">
										<view class="time-point start">
											<uni-icons type="checkbox-filled" size="20" color="#4a90e2"></uni-icons>
										</view>
										<view class="time-content">
											<text class="date">{{ currentDetail.gmrq }}</text>
											<text class="label">购买日期</text>
										</view>
									</view>

									<view class="timeline-divider">
										<view class="line"></view>
										<!-- <view class="period-badge">
											<text>{{ getYear(currentDetail.yxrq) }}年</text>
										</view> -->
									</view>

									<view class="timeline-item">
										<view class="time-point end">
											<uni-icons type="calendar-filled" size="20" color="#f56c6c"></uni-icons>
										</view>
										<view class="time-content">
											<text class="date">{{ currentDetail.yxrq }}</text>
											<text class="label">到期时间</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 底部按钮 -->
				<view class="popup-footer">
					<button class="close-btn" @click="handleCloseDetail">
						<uni-icons type="close" size="18" color="#fff"></uni-icons>
						<text>关闭详情</text>
					</button>
				</view>
			</view>
		</uni-popup>
	</layout>
	<back></back>
	<IdleLogout />
</template>

<script setup>
	// 区域结果
	const parkArea = ref('');

	// 园区选项数据
	const parkOptions = ref([]);

	// 查询数据参数
	const queryParams = ref({
		pageNum: 1,
		pageSize: 9,
		gs: useCompanyStore().GetCurCompanyInfo().bm,
	});

	// 搜索结果
	const searchResults = ref([]);

	// 搜索结果总数
	const searchResultsCount = ref(0);

	// 搜索结果为空
	const searchResultsEmpty = ref(true);

	// 详情弹窗
	const detailPopup = ref(null);

	// 当前详情
	const currentDetail = ref(null);

	// 刷新时间
	const refreshTime = ref('00:00:00');

	// 查询方法
	const handleSearch = async () => {
		init();
		getList();
	};

	// 重置查询
	const handleReset = () => {
		parkArea.value = '';
		queryParams.value.szxm = '';
		queryParams.value.xm = '';
		queryParams.value.lxdh = '';
		queryParams.value.mwy = '';
		queryParams.value.mwq = '';
		queryParams.value.mwp = '';
		init();
		// getList();
	};

	/**
	 * 分页改变
	 * @param {*} item
	 */
	const handlePaginationChange = (item) => {
		console.log('🚀 ~ handlePaginationChange ~ item:', item);
		queryParams.value.pageNum = item.current;
		searchResultsEmpty.value = true;
		searchResults.value = [];
		getList();
	};

	// 查看详情
	const handleViewDetail = async (item) => {
		const { code, data } = await ApiGetCemeteryDetail(item.id);
		if (code === 200) {
			const status = useRuntimeConfig().data.cemeteryStatus.find((status) => status.value === data.mwztKey);
			data.color = status?.color;
			data.background = status?.background;
			currentDetail.value = data;
			detailPopup.value.open();
		}
	};

	// 关闭详情
	const handleCloseDetail = () => {
		detailPopup.value.close();
	};

	// 刷新数据
	const handleRefreshParkData = () => {
		getParkData();
	};

	/**
	 * 区域选择器
	 * @param {Object} e 事件对象
	 */
	const handleAreaChange = (e) => {
		console.log(e);
		queryParams.value.mwy = '';
		queryParams.value.mwq = '';
		queryParams.value.mwp = '';
		if (e.detail.value && e.detail.value.length) {
			queryParams.value.mwy = e.detail.value[0].text;
			queryParams.value.mwq = e.detail.value[1].text;
			queryParams.value.mwp = e.detail.value[2].text;
		}
	};

	// 获取名字
	const getNames = (array) => {
		return array && array.length ? array.map((item) => item.szxm).join('、') : '-';
	};

	/**
	 * 计算年龄
	 * @param {String} year 年份
	 * @returns {Number} 年龄
	 */
	const getYear = (year) => {
		return UTILGetDiffYear(year);
	};

	// 设置文本掩码
	const setPhone = (phone) => {
		return phone ? UTILSetTextMask(phone, '###****####') : '-';
	};

	// 获取墓地列表
	const getList = async () => {
		try {
			uni.showLoading({ title: '墓位获取中...', mask: true });
			refreshTime.value = UTILFormatDate(new Date(), 'YYYY-MM-DD HH:mm:ss');
			const { code, rows, total } = queryParams.value.szxm ? await ApiGetCemeteryBySzxm(queryParams.value) : await ApiGetCemeteryList(queryParams.value);
			if (code === 200) {
				rows.forEach((item) => {
					const status = useRuntimeConfig().data.cemeteryStatus.find((status) => status.value === item.mwztKey);
					item.color = status?.color;
					item.background = status?.background;
				});
				searchResults.value = [...searchResults.value, ...rows];
				searchResultsCount.value = total;
				searchResultsEmpty.value = searchResults.value.length === 0;
				console.log('🚀 ~ getList ~ searchResults.value:', searchResults.value);
			}
		} catch (error) {
			console.log('getList', error);
		} finally {
			uni.hideLoading();
		}
	};

	// 初始化
	const init = () => {
		searchResults.value = [];
		searchResultsCount.value = 0;
		searchResultsEmpty.value = true;
		queryParams.value.pageNum = 1;
	};

	// 获取园区数据
	const getParkData = async () => {
		try {
			// 获取存储数据
			uni.showLoading({ title: '园区获取中...', mask: true });
			const { code, rows } = await ApiGetCemeteryAddress({
				ssgs: useCompanyStore().GetCurCompanyInfo().bm,
			});
			if (code === 200) {
				// 设置树形结构
				parkOptions.value = UTILCemeteryArrayToTree(rows);
				// 缓存数据
				useCompanyStore().setParkData({
					data: parkOptions.value,
					refreshTime: new Date().getTime(),
				});
			}
		} catch (error) {
			console.log('ApiGetCemeteryAddress', error);
		} finally {
			uni.hideLoading();
			// init();
			// getList();
		}
	};

	onLoad(() => {
		// 获取缓存数据
		const parkData = useCompanyStore().GetParkData();
		// 如果缓存数据存在，则判断是否需要重新获取数据
		if (parkData) {
			// 计算时间差
			const calcTime = new Date().getTime() - parkData.refreshTime;
			// 设置缓存时间为2小时 (2 * 60 * 60 * 1000 = 7200000)
			const cacheTime = 2 * 60 * 60 * 1000;
			if (calcTime > cacheTime) {
				getParkData();
			} else {
				parkOptions.value = parkData.data;
				// init();
				// getList();
			}
		} else getParkData();
	});
</script>

<style lang="scss" scoped>
	.main-content {
		display: flex;
		gap: 15px;
		height: calc(100vh - 130px);
		:deep(.uni-icons) {
			font-size: 14px !important;
		}
	}

	.search-section {
		flex: 1;
		background: #fff;
		border-radius: 15px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

		// 调整搜索框样式
		:deep(.uni-easyinput__content) {
			background-color: #f5f7fa !important;
		}

		// 调整选择器样式
		:deep(.uni-data-tree-input) {
			height: 35px;
			background-color: #f8f8f8;
			border-radius: 2px;
		}

		.search-header {
			background: linear-gradient(135deg, #4a90e2, #357abd);
			padding: 20px;
			color: #fff;
			border-radius: 15px 15px 0 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.title-area {
				display: flex;
				align-items: center;
				// margin-bottom: 8px;

				.title-icon {
					background: rgba(255, 255, 255, 0.2);
					border-radius: 8px;
					padding: 6px;
					margin-right: 10px;
				}

				.title {
					font-size: 18px;
					font-weight: 600;
					letter-spacing: 0.5px;
					margin-right: 12px;
				}

				.refresh-btn {
					display: flex;
					align-items: center;
					gap: 4px;
					padding: 4px 8px;
					background: rgba(255, 255, 255, 0.2);
					border-radius: 4px;
					font-size: 12px;
					cursor: pointer;
					transition: all 0.3s ease;

					&:active {
						background: rgba(255, 255, 255, 0.3);
						transform: scale(0.98);
					}
				}
			}

			.subtitle {
				font-size: 12px;
				opacity: 0.6;
			}
		}

		.search-form {
			padding: 20px;

			.form-row {
				display: flex;
				gap: 15px;
				margin-bottom: 15px;

				.form-item {
					flex: 1;

					.label {
						display: block;
						font-size: 14px;
						color: #333;
						margin-bottom: 8px;
						font-weight: 500;
					}

					.input-wrapper {
						display: flex;
						align-items: center;
						background-color: #f5f7fa;
						border-radius: 6px;
						padding: 0 10px;
						transition: all 0.3s ease;
						border: 1px solid #e8e8e8;
						height: 45px;

						&:focus-within {
							border-color: #606c88;
						}
						:deep(.uni-data-picker) {
							flex: 1;
							margin-left: 5px;

							.uni-data-picker__input {
								height: 38px;
								border: none;
								background: transparent;
							}
						}
					}
				}
			}

			.quick-tips {
				display: flex;
				justify-content: center;
				gap: 15px;
				flex-direction: column;

				.tip-item {
					display: flex;
					align-items: center;
					gap: 5px;
					color: #999;
					font-size: 13px;
					position: relative;
					z-index: 1;

					.refresh-link {
						display: flex;
						align-items: center;
						gap: 4px;
						margin-left: 8px;
						color: #4a90e2;
						cursor: pointer;

						&:active {
							opacity: 0.8;
						}
					}
				}
			}
		}

		.search-actions {
			flex: 1;
			display: flex;
			gap: 15px;
			align-items: center;
			margin-bottom: 20px;
			margin-top: 30px;

			.reset-btn,
			.search-btn {
				height: 45px;
				border-radius: 8px;
				font-size: 16px;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 6px;
				// width: 260px;
				flex: 1;

				&:active {
					opacity: 0.9;
				}
			}

			.reset-btn {
				background: #f5f7fa;
				border: 1px solid #e8e8e8;
				color: #666;

				&:hover {
					background: #eef0f5;
				}
			}

			.search-btn {
				background: linear-gradient(135deg, #3f4c6b, #606c88);
				border: none;
				color: #fff;

				&:hover {
					background: linear-gradient(135deg, #4a5980, #6b7ba0);
				}
			}
		}
	}

	.result-section {
		flex: 1.2;
		padding: 15px;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
		width: 100%;
		height: 100%;

		.result-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 15px;
			margin-bottom: 20px;
			border-bottom: 1px solid #eee;

			.header-left {
				display: flex;
				align-items: center;
				gap: 8px;

				.title {
					font-size: 16px;
					font-weight: 600;
					color: #333;
				}

				.count {
					font-size: 14px;
					color: #666;
				}
			}

			.update-time {
				font-size: 13px;
				color: #999;
			}
		}

		.empty-result {
			display: flex;
			flex-direction: column;
			align-items: center;

			.empty-icon {
				width: 220px;
				height: 220px;
			}

			.empty-text {
				font-size: 16px;
				color: #333;
				margin-bottom: 8px;
			}

			.empty-desc {
				font-size: 14px;
				color: #999;
			}
		}

		.result-grid-container {
			width: 100%;
			height: calc(100% - 90px);
			overflow-y: scroll;
		}

		.result-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
			padding: 10px;

			.result-card {
				position: relative;
				background: #fff;
				border-radius: 12px;
				padding: 20px;
				border: 1px solid #eee;
				transition: all 0.3s ease;
				overflow: hidden;

				&:active {
					transform: translateY(-2px);
					box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
					border-color: #e0e7ff;

					.card-pattern {
						opacity: 0.1;
					}
				}

				// 顶部装饰图案
				.card-pattern {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					height: 40px;
					background: linear-gradient(45deg, #4a90e2 25%, transparent 25%) -8px 0, linear-gradient(-45deg, #4a90e2 25%, transparent 25%) -8px 0;
					background-size: 16px 16px;
					opacity: 0.05;
					transition: opacity 0.3s ease;
				}

				.card-header {
					position: relative;
					margin-bottom: 15px;
					z-index: 1;

					.header-main {
						margin-bottom: 12px;

						.deceased-name {
							font-size: 16px;
							font-weight: 600;
							color: #333;
						}
					}

					.header-tags {
						display: flex;
						gap: 8px;
						align-items: center;

						.park-tag,
						.status-tag {
							display: flex;
							align-items: center;
							gap: 4px;
							font-size: 12px;
							padding: 3px 8px;
							border-radius: 4px;
						}

						.park-tag {
							background: #f0f7ff;
							color: #4a90e2;
						}

						.status-tag {
							background: #f0f9eb;
							color: #67c23a;
							display: flex;
							align-items: center;
							gap: 10px;
						}
					}
				}

				.card-content {
					.info-group {
						.info-item {
							display: flex;
							align-items: center;
							margin-bottom: 8px;

							.uni-icons {
								margin-right: 6px;
								flex-shrink: 0;
							}

							.label {
								font-size: 12px;
								color: #666;
								width: 60px;
								flex-shrink: 0;
							}

							.value {
								font-size: 12px;
								color: #333;
							}
						}
					}
				}

				.card-footer {
					margin-top: 12px;
					text-align: right;

					.detail-btn {
						display: inline-flex;
						align-items: center;
						gap: 4px;
						font-size: 12px;
						color: #4a90e2;
						background: transparent;
						border: 1px solid #4a90e2;
						border-radius: 4px;
						transition: all 0.3s ease;
						height: 36px;

						&:active {
							background: #f0f7ff;
							transform: translateY(-1px);
						}

						&:active {
							transform: translateY(0);
						}
					}
				}

				// 角落装饰
				.corner-decoration {
					position: absolute;
					width: 6px;
					height: 6px;
					border: 2px solid #4a90e2;
					opacity: 0.2;

					&.top-left {
						top: 10px;
						left: 10px;
						border-right: none;
						border-bottom: none;
					}

					&.top-right {
						top: 10px;
						right: 10px;
						border-left: none;
						border-bottom: none;
					}

					&.bottom-left {
						bottom: 10px;
						left: 10px;
						border-right: none;
						border-top: none;
					}

					&.bottom-right {
						bottom: 10px;
						right: 10px;
						border-left: none;
						border-top: none;
					}
				}
			}
		}
	}

	.pagination-container {
		display: flex;
		justify-content: center;
		margin-top: 10px;
	}

	.detail-popup {
		width: 520px;
		background: #fff;
		border-radius: 15px;

		:deep(.uni-icons) {
			font-size: 18px !important;
		}

		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;
			background: linear-gradient(135deg, #4a90e2, #357abd);
			color: #fff;
			border-radius: 15px 15px 0 0;

			.title {
				font-size: 18px;
				font-weight: 500;
			}
		}

		.popup-content {
			max-height: 82vh;
			overflow-y: auto;
			padding-bottom: 100px;
			box-sizing: border-box;
			border-radius: 15px;

			.main-info {
				padding: 20px;
				border-bottom: 1px solid #eee;

				.info-header {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10px;

					.info-header-left {
						display: flex;
						flex-direction: column;
						gap: 10px;
						margin-bottom: 10px;

						.info-header-left-item {
							display: flex;
							align-items: center;
							gap: 18px;
						}
					}

					.deceased-name {
						font-size: 24px;
						font-weight: 600;
						color: #333;
					}

					.deceased-age {
						font-size: 16px;
						color: #666;
					}

					.deceased-gender {
						font-size: 16px;
						color: #666;
					}

					.deceased-relationship {
						font-size: 16px;
						color: #666;
					}

					.status-tag {
						display: flex;
						align-items: center;
						gap: 4px;
						padding: 4px 12px;
						border-radius: 12px;
						font-size: 13px;

						&.active {
							background: #f0f9eb;
							color: #67c23a;
						}

						&.expired {
							background: #fef0f0;
							color: #f56c6c;
						}
					}
				}

				.park-info {
					display: flex;
					align-items: center;
					gap: 6px;
					color: #666;
					font-size: 16px;
					font-weight: 500;
				}
			}

			.info-grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 15px;
				padding: 20px;
				background: #f8f9fc;

				.grid-item {
					background: #fff;
					border-radius: 12px;
					overflow: hidden;
					transition: all 0.3s ease;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						height: 3px;
						background: linear-gradient(90deg, #4a90e2, #357abd);
						opacity: 0;
						transition: opacity 0.3s ease;
					}

					&:hover {
						transform: translateY(-2px);
						box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);

						&::before {
							opacity: 1;
						}

						.icon-wrapper {
							transform: scale(1.1);
						}
					}

					.item-inner {
						padding: 20px;
						display: flex;
						align-items: center;
						gap: 15px;

						.icon-wrapper {
							width: 48px;
							height: 48px;
							border-radius: 12px;
							background: #f0f7ff;
							display: flex;
							align-items: center;
							justify-content: center;
							transition: all 0.3s ease;
							flex-shrink: 0;
						}

						.content {
							flex: 1;
							display: flex;
							flex-direction: column;
							gap: 4px;

							.value {
								font-size: 16px;
								color: #333;
								font-weight: 500;
								line-height: 1.4;

								// 处理长文本
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.label {
								font-size: 13px;
								color: #999;
							}
						}
					}

					// 为不同类型的信息添加不同的颜色主题
					&:nth-child(1) {
						.icon-wrapper {
							background: #f0f7ff;
							color: #4a90e2;
						}
						&::before {
							background: linear-gradient(90deg, #4a90e2, #357abd);
						}
					}

					&:nth-child(2) {
						.icon-wrapper {
							background: #f6f5ff;
							color: #6c5ce7;
						}
						&::before {
							background: linear-gradient(90deg, #6c5ce7, #5547b9);
						}
					}

					&:nth-child(3) {
						.icon-wrapper {
							background: #fff7f0;
							color: #fd9644;
						}
						&::before {
							background: linear-gradient(90deg, #fd9644, #f57c22);
						}
					}

					&:nth-child(4) {
						.icon-wrapper {
							background: #f0faf6;
							color: #26de81;
						}
						&::before {
							background: linear-gradient(90deg, #26de81, #20bf6b);
						}
					}
				}
			}

			.expiry-info {
				padding: 20px;
				background: #fff;

				.expiry-header {
					display: flex;
					align-items: center;
					gap: 8px;
					margin-bottom: 16px;

					text {
						font-size: 15px;
						font-weight: 500;
						color: #333;
					}
				}

				.expiry-content {
					.expiry-card {
						position: relative;
						padding: 24px;
						background: linear-gradient(135deg, #f8f9fc, #f0f7ff);
						border-radius: 12px;
						border: 1px solid #e0e7ff;

						.expiry-timeline {
							position: relative;
							padding: 0 20px;

							.timeline-item {
								display: flex;
								align-items: center;
								gap: 16px;

								.time-point {
									width: 40px;
									height: 40px;
									border-radius: 50%;
									display: flex;
									align-items: center;
									justify-content: center;

									&.start {
										background: #f0f7ff;
										border: 2px solid #4a90e2;
									}

									&.end {
										background: #fff0f0;
										border: 2px solid #f56c6c;
									}
								}

								.time-content {
									flex: 1;

									.date {
										display: block;
										font-size: 18px;
										font-weight: 600;
										color: #333;
										line-height: 1.4;
									}

									.label {
										font-size: 13px;
										color: #999;
									}
								}
							}

							.timeline-divider {
								position: relative;
								height: 60px;
								margin-left: 20px;

								.line {
									position: absolute;
									left: 0;
									top: 0;
									bottom: 0;
									width: 2px;
									background: #e0e7ff;
								}

								.period-badge {
									position: absolute;
									left: 50%;
									top: 50%;
									transform: translate(-50%, -50%);
									background: #4a90e2;
									color: #fff;
									padding: 4px 12px;
									border-radius: 12px;
									font-size: 13px;
									font-weight: 500;
									white-space: nowrap;
									box-shadow: 0 2px 8px rgba(74, 144, 226, 0.2);
								}
							}
						}

						.status-badge {
							position: absolute;
							top: 20px;
							right: 20px;
							display: flex;
							align-items: center;
							gap: 4px;
							padding: 6px 12px;
							border-radius: 20px;
							font-size: 13px;

							&.active {
								background: #f0f9eb;
								color: #67c23a;
							}

							&.expired {
								background: #fef0f0;
								color: #f56c6c;
							}
						}
					}
				}
			}
		}
		.popup-footer {
			padding: 15px;
			text-align: center;
			background: #f8f8f8;
			border-top: 1px solid #eee;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			border-radius: 0 0 15px 15px;
			
			.close-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 200px;
				height: 38px;
				font-size: 14px;
				color: #fff;
				background: linear-gradient(135deg, #606c88, #3f4c6b);
				box-shadow: 0 2px 6px rgba(74, 144, 226, 0.2);
				border: none;
				border-radius: 38px;
				transition: all 0.3s ease;
				gap: 6px;

				&:hover {
					transform: translateY(-1px);
					box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
				}

				&:active {
					transform: translateY(0);
					box-shadow: 0 2px 6px rgba(74, 144, 226, 0.2);
				}
			}
		}
	}
</style>
